<template>
  <div class="finish">
    <h2>
      <span>已经完成</span>
      <span>{{getData.length}}</span>
    </h2>
    <ul>
      <li v-for="item in getData" :key="item.id">
        <p>
          <input type="checkbox" @change="change($event,item.id)" checked />
          {{item.msg}}
          <button @click="del(item.id)">删除</button>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Finish",
  data() {
    return {};
  },
  methods: {
    change(e, id) {
      var obj = {
        check: e.target.checked,
        id: id
      };
      this.$store.commit("change", obj);
    },
    // 删除
    del(id) {
      this.$store.commit("del", id);
    }
  },
  computed: {
    getData() {
      return this.$store.getters.getFinish;
    }
  }
};
</script>

<style scoped>
.finish {
  width: 500px;
  margin: 0 auto;
}
.finish h2 {
  display: flex;
  justify-content: space-between;
}
.finish ul li {
  margin-left: -40px;
  height: 24px;
  line-height: 24px;
  background: white;
}
.finish ul li button {
  float: right;
}
</style>